﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<script src="~/lib/axios.js"></script>

<script src="~/lib/vue.js"></script>


<div id="app">
    <button type="button" class="btn btn-danger" v-on:click="del(checkId.toString())">批量删除</button>

    <table class="table table-bordered">
        <tr>
            <th><input type="checkbox" v-on:click="checkAll($event)"/>全选</th>
            <th>事项名称</th>
            <th>当事人</th>
            <th>事项状态</th>
            <th>事项图片</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in itemList">
            <td><input type="checkbox" v-model="checkId" v-bind:value="item.itemId"/></td>
            <td>{{item.title}}</td>
            <td>{{item.empName}}</td>
            <td>{{item.statusString}}</td>
            <td><img v-bind:src="'https://localhost:5001/'+ item.filePath" width="100px"/></td>
            <td>
                <button type="button" v-on:click="del(item.itemId)">删除</button> |
                <button type="button" v-on:click="upt(item.itemId)">编辑</button>
            </td>
        </tr>
        
    </table>
    <div>
        <button type="button" class="btn btn-default" v-on:click="changePage('h')">首页</button>
        <button type="button" class="btn btn-default" v-on:click="changePage('p')">上一页</button>
        <button type="button" class="btn btn-default" v-on:click="changePage('n')">下一页</button>
        <button type="button" class="btn btn-default" v-on:click="changePage('l')">尾页</button>
    </div>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: { //定义页面中使用的数据
            itemList: [],   //所有的待办事项
            pageIndex: 1,
            pageSize: 5,
            pageCount: 0,    //总页数
            checkId:[]       //复选框选中的主键 数组
        },
        methods: { //写方法
            show() {
                //调用API接口，给itemList赋值
                axios({
                    url: 'https://localhost:5001/api/Item/GetList',//api接口地址
                    method: 'get',
                    params: {   //请求参数
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize
                    }
                }).then((res) => { //api调用成功之后的回调函数

                    //1. 调试一下是否拿到了数据
                    console.log(res.data);

                    //2. 把数据赋值给
                    this.itemList = res.data.data;
                    this.pageCount = res.data.pageCount;
                });
            },

            changePage(index) {  //切换不同页
                switch (index) {
                    case 'h':
                        this.pageIndex = 1;
                        this.show();
                        break;
                    case 'p':
                        this.pageIndex = this.pageIndex > 1? this.pageIndex - 1 : 1 ;
                        this.show();
                        break;
                    case 'n':
                        this.pageIndex = this.pageIndex < this.pageCount ? this.pageIndex + 1 : this.pageCount;
                        this.show();
                        break;
                    case 'l':
                        this.pageIndex = this.pageCount;
                        this.show();
                        break;
                    default:
                }
            },
            del(id) {

                console.log(id);

                //调用API接口，进行删除

                axios({
                    url: 'https://localhost:5001/api/Item/delete',//api接口地址
                    method: 'POST',
                    params: {   //请求参数
                       ids: id
                    }
                }).then((res) => { //api调用成功之后的回调函数

                    //1. 调试一下是否拿到了数据
                    console.log(res.data);
                    if (res.data.result > 0) {
                        alert(res.data.msg);
                        this.show(); //重新加载数据
                    }
                });
            },
            upt(id) {
               
            },
            checkAll(event) {
                //当全选按钮被点击时，根据全选按钮的值，来全选或反选 下面的复选按钮
                if (event.target.checked) {  //判断全选按钮是否被选中
                    this.checkId = this.itemList.map(x => x.itemId);
                } else {
                    this.checkId = []; //把选中的数组 重置为空
                }

               //console.log(this.checkId); //调试打印
            }
        },
        mounted() {  //第一次加载事件
            this.show();
        },
    });

</script>